<!--
Copyright (c) 2015 Branza Victor-Alexandru <branza.alex[at]gmail.com>

This program is free software; you can redistribute it and/or modify it
under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation; either version 2.1 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Powder Player</title>

    <link rel="stylesheet" href="resources/loader.css" />
    <link rel="stylesheet" href="resources/pure-min.css">
    <link rel="stylesheet" href="resources/bootstrap-progressbar/css/bootstrap-progressbar-3.3.0.min.css">
    <link rel="stylesheet" href="resources/animate.min.css">
    <link rel="stylesheet" href="resources/jquery-ui-1.11.3/jquery-ui.min.css" />
    <link rel="stylesheet" href="resources/bootstrap-dropdown/jquery.dropdown.css" />
    <link rel="stylesheet" href="resources/style.css" />
    <link rel="stylesheet" href="resources/scrollbar.css" />
    <link rel="stylesheet" href="resources/mini-ui.css" />
    
<style>

/* these need to be here to load the window frame css faster */

::-webkit-scrollbar-thumb {
  display: none;
}



div#content {
  margin: 0px;
  padding: 0px;
  border: 1px solid rgba(54,54,54,1);
  border-top: none;
  padding-right: 8px;
}

div#inner-content {
  margin: 10px;
  width: 100%;
  height: calc(100% - 4px);
  margin: 0;
  border: 4px solid rgba(83,83,83,1);
  border-top: none;
  overflow: hidden
}

div#inner-in-content {
  border: 1px solid rgba(54,54,54,1);
  height: calc(100% - 2px);
  overflow-x: hidden;
/*  overflow-y: scroll; */
  overflow-y: hidden;
}

div#inner-in-in-content {
  height: 100%;
  background: #fff;
}

.top-titlebar {
  position: absolute;
  left: 0px;
  top: 0px;
  width: calc(100% - 2px);
  height: 32px;
  background-color: #535353;
  -webkit-user-select: none;
  -webkit-app-region: drag;
/* rounded corners */
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;

  border: 1px solid #363636;
  border-bottom: 0px;
  -webkit-box-shadow: inset 0px 1px 1px 0px rgba(101,101,101,1);
}

.top-titlebar-icon {
  position: absolute;
  left: 6px;
  margin-top: 8px;
  margin-bottom: 8px;
  width: 16px;
  height: 16px
}

#top-titlebaricon {
  width: 16px;
  height: 16px
}

.top-titlebar-text {
  position: absolute;
  margin-top: 8px;
  margin-bottom: 8px;
  font-family: Arial;
  font-size: 11pt;
  color: #ffffff;
  text-shadow: 0px -1px 0px rgba(51, 51, 51, 1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.top-text-center {
  left: 125px;
  right: 125px;
  width: calc(100% - 250px);
  text-align: center
}

.top-text-left {
  left: 32px;
  right: 125px;
  width: calc(100% - 157px);
  text-align: left;
  font-size: 14px
}

#titlebar-buttons {
  float: right;
  height: 32px;
  width: 120px;
  -webkit-app-region: no-drag;
}

.top-titlebar-close-button {
  float:right;
  margin-right: 6px;
  width: 48px;
  height: 20px;
  margin-top: 6px;
  -webkit-app-region: no-drag;
  cursor: pointer;
}

.top-titlebar-maximize-button {
  float:right;
  width: 27px;
  height: 20px;
  margin-top: 6px;
  -webkit-app-region: no-drag;
  cursor: pointer;
}

.top-titlebar-restore-button {
  float:right;
  width: 27px;
  height: 20px;
  margin-top: 6px;
  -webkit-app-region: no-drag;
  cursor: pointer;
  display: none
}

.top-titlebar-minimize-button {
  float:right;
  width: 28px;
  height: 20px;
  margin-top: 6px;
  -webkit-app-region: no-drag;
  cursor: pointer;
}

#header_container {
  left: 6px !important;
  top: 34px !important;
}

body {
  background: transparent !important;
}

.lean-overlay {
  top: 34px !important;
  left: 6px !important;
  height: calc(100% - 40px) !important;
  width: calc(100% - 12px) !important;
}

</style>

    <script src="resources/jquery-2.1.3.min.js"></script>
    <script src="resources/jquery.easyModal.js"></script>
    <script src="resources/jquery-ui-1.11.3/jquery-ui.min.js"></script>
    <script src="resources/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
    <script src="resources/bootstrap-dropdown/jquery.dropdown.js"></script>
    <script src="resources/jquery-circle-progress-1.1.3/dist/circle-progress.js"></script>
</head>

<body class="mini">
<div id="top-titlebar" class="top-titlebar" style="opacity: 1;"><div class="top-titlebar-icon"><img id="top-titlebaricon" src="../icon.png"></div><div class="top-titlebar-text top-text-center">Powder Player</div><div id="titlebar-buttons"><div class="top-titlebar-close-button"><img id="top-titlebar-close-button" src="images/button_close.png"></div><div class="top-titlebar-maximize-button"><img id="top-titlebar-maximize-button" src="images/maximize.png"></div><div class="top-titlebar-restore-button"><img id="top-titlebar-restore-button" src="images/restore.png"></div><div class="top-titlebar-minimize-button"><img id="top-titlebar-minimize-button" src="images/minimize.png"></div></div></div>
  <div id="content" style="position: absolute; left: 0px; top: 33px; width: calc(100% - 10px); height: calc(100% - 34px); border-color: rgb(54, 54, 54)">
    <div id="inner-content">
    	<div id="inner-in-content">
			<div id="inner-in-in-content">

    <div id="loading">
        <div id="loading-center">
            <div id="loading-center-absolute">
                <div class="object" id="object_one"></div>
                <div class="object" id="object_two"></div>
                <div class="object" id="object_three"></div>
                <div class="object" id="object_four"></div>
                <div class="object" id="object_five"></div>
                <div class="object" id="object_six"></div>
                <div class="object" id="object_seven"></div>
                <div class="object" id="object_eight"></div>
                <div class="object" id="object_big"></div>
            </div>
        </div>
    </div>

    <div id="main" class="opaque">
        <div class="wrapper">
            <center>
		        <div id="holder">
                    <a class="pl-settings easy-modal-open" href="#player-settings"><i class="player-settings"></i></a>
                    <a class="history-button easy-modal-open" href="#history-powder" onClick="ui.mechanics.printHistory()"><i class="history-icon"></i></a>
                    <img src="images/powder-logo.png" id="logoBig">
                    <br>
                    <b class="fl_dd droid-bold">Drag & Drop a File</b>
                    <br>
                    <span class="fl_sl">or select an option below</span>
                    <br><br>
                    <div id="mainButHold">
						<a href="#" onClick="chooseFile('#torrentDialog'); return false">
		                    <div id="torrentBut" class="mainButtons goLeft">
								<img id="torIcon" src="images/torrent-icon.png">
								<br>Add Torrent
		                    </div>
						</a>
                    	<a href="#" onClick="chooseFile('#fileDialog'); return false">
                    		<div id="videoBut" class="mainButtons">
                    			<img id="vidIcon" src="images/video-icon.png">
                    			<br>Add Video
                    		</div>
						</a>
                    	<a class="main-add-url" href="#open-url">
		                    <div id="linkBut" class="mainButtons goRight noMarginRight">
			                    <img id="urlIcon" src="images/link-icon.png">
			                    <br>Use a URL
		                    </div>
                        </a>
                    </div>
                    <br><br>
                    <span id="footer">
                    	<b class="droid-bold">Supports:</b> Torrent Files / Links, Magnet Links, Youtube Links,<br>Youtube Playlist Links and all <a class="mainLinks" onClick="gui.Shell.openExternal('http://www.videolan.org/vlc/features.php?cat=video'); return false" href="http://www.videolan.org/vlc/features.php?cat=video" target="_blank">VLC Supported Media Formats</a>.
                    </span>
				</div>
			</center>
        </div>
	</div>
    
    <div id="player_wrapper"></div>
    
    <center id="filesListBack">
        <div id="header_container" class="hidden">
            <div id="header">
                <div class="stats">
                    <span><i class="peersIcon"></i>Peers: <span id="nrPeers">0</span></span><br>
                    <span><i class="speedIcon"></i>Speed: <span id="speed">0.0 kB/s</span></span><br>
                    <span><i class="downloadIcon"></i>Downloaded: <span id="downPart">0 kB</span> / <span id="downAll">0 kB</span></span>
                </div>
                <div id="all-download" class="progress">
                    <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="0"></div><br>
                </div>
                <span id="downloadPercent">0%</span>

                <div id="header_content">
                    <div id="header_text" class="wrap-text goLeft" style="display:none"><span id="headerText"></span></div>
                    <div id="optHold" class="goRight"><a id="optionsBut" href="#" data-dropdown="#dropdown-1"><i class="tools"></i></a></div>
                </div>
            </div>
        </div>
        <div id="filesList"></div>
    </center>
    
    <div class="easy-modal-animated" id="open-url">
        <div id="internet-ok">
            <div id="holdCenter">
                    <div id="formHolder">
                        <form class="pure-form pure-form-aligned" onsubmit="ui.buttons.urlFormAction(); return false;" id="magnetForm">
                            <fieldset>
                                <div class="pure-control-group">
                                    <input id="magnetLink" type="text" name="magnet" placeholder="Magnet URI or Video URL" onFocus="this.select();" onMouseUp="return false;">
                                    <button id="magnetSubmit" type="submit" class="pure-button pure-button-primary">Stream</button>
                                </div>
                            </fieldset>
                        </form>
                    </div>
            </div>
            <button class="animated-close pure-button pure-margin" title="Close">Close</button>
        </div>
        <div id="internet-error" class="hidden">
            <center>
                You require an internet connection to use this feature.<br><br>
                <button class="animated-close pure-button pure-margin" title="I understand">I understand</button>
            </center>
        </div>
    </div>
    
    <div class="second-easy-modal-animated" id="file-settings">
        <center>
            <h2 class="spBottom">Select an Action</h2>
            <div id="playAction" onClick="" class="actionButton">Play Now</div>
            <div id="openAction" onClick="" class="actionButton">Open File</div>
            <div id="openFolderAction" onClick="" class="actionButton">Open Containing Folder</div>
            <div id="copyStream" onClick="" class="actionButton">Copy Stream URL</div>
            <div id="closeAction"class="second-animated-close actionButton">Close</div>
        </center>
    </div>
    
    <div class="third-easy-modal-animated" id="player-settings">
        <center>
            <h2 class="headButs goLeft">Player Settings</h2>
            <h2 class="headButs change-set goRight" onClick="$('.third-animated-close').trigger('click'); setTimeout(function() { $('#tr-settings').trigger('click'); },1000); return false">Torrent Settings</h2>
            <div class="clear"></div>
            <div id="but-assoc1" onClick="utils.register.magnet(); return false" class="actionButton droid-bold">Associate with Magnet Links</div>
            <div id="but-assoc2" onClick="utils.register.torrent(); return false" class="actionButton droid-bold">Associate with Torrent Files</div>
            <div id="but-assoc3" onClick="utils.register.videos(); return false" class="actionButton droid-bold">Associate with Video Files</div>
            <div id="but-vlc" class="actionButton wrap-text"><span class="droid-bold">Video Player: <select id="use-player"><option>Internal</option><option>VLC</option></select></span></div>
            <div onClick="ui.settings.changeClickPause(); return false" class="internal-opt actionButton wrap-text"><span class="droid-bold">Click to Pause:</span> <span id="click-pause">only in Fullscreen</span></div>
            <div onClick="chooseFile('#libraryDialog'); return false" class="internal-opt actionButton wrap-text"><span class="droid-bold">Library Folder:</span> <span id="lib-folder">Temp</span></div>
            <div onClick="ui.settings.changeNoSub(); return false" class="internal-opt actionButton wrap-text"><span class="droid-bold">Auto-Download Subtitles:</span> <span id="click-no-sub">True</span></div>
            <div id="closeAction" class="third-animated-close actionButton" style="font-family: 'Droid Sans Bold' !important;font-weight: bold">Close Menu</div>
        </center>
    </div>
    
    <div class="forth-easy-modal-animated" id="torrent-settings">
        <center>
            <h2 class="headButs change-set goLeft" onClick="$('.forth-animated-close').trigger('click'); setTimeout(function() { $('.pl-settings').trigger('click'); },1000); return false">Player Settings</h2>
            <h2 class="headButs goRight">Torrent Settings</h2><div class="clear"></div>
            <div id="max-peers-hov" onClick="ui.mechanics.openPeerSelector(); return false" class="actionButton"><span class="droid-bold">Maximum Peers:</span> <span id="max-peers">100</span><input id="spinner" value="100" />
            </div>
            <div onClick="chooseFile('#folderDialog'); return false" class="actionButton wrap-text"><span class="droid-bold">Download Folder:</span> <span id="def-folder">Temp</span></div>
            <div onClick="ui.settings.changePulseSetting(); return false" class="internal-opt actionButton wrap-text"><span class="droid-bold">Speed Pulsing:</span> <span id="click-pulse">auto</span></div>
            <div id="closeAction" class="forth-animated-close actionButton" style="font-family: 'Droid Sans Bold' !important;font-weight: bold">Close Menu</div>
        </center>
    </div>
    
    <div class="ask-remove-files" style="background:#fff;padding:10px">
        <center>
            <h2 class="headButs change-set goLeft" style="margin-bottom:20px;width:calc(100% - 17px);background:#1C728A !important;cursor:default !important;-webkit-user-select:none">Remove Downloaded Files?</h2><div class="clear"></div>
            <button type="submit" class="pure-button pure-button-success" onClick="win.closeProcedure(true);return false;">Yes</button><span style="cursor:default;-webkit-user-select:none">&nbsp;&nbsp;&nbsp;&nbsp;</span><button type="submit" class="pure-button pure-button-error" onClick="win.closeProcedure(false);return false;">No</button><span style="cursor:default;-webkit-user-select:none">&nbsp;&nbsp;&nbsp;&nbsp;</span><button class="pure-button pure-button-warning" onClick="$('.ask-remove-files').trigger('closeModal');return false;">Cancel</button>
        </center>
    </div>

    <div class="history-easy-modal-animated" id="history-powder">
        <h2 id="history-title" class="goLeft">History</h2>
        <h2 class="change-set history-animated-close goRight history-close"><i class="close-icon"></i></h2>
        <div class="clear"></div>
        <div id="history-list"></div>
    </div>
    
    <div class="unsupported-easy-modal-animated" id="unsupported">
        <center>
            <h2 class="spBottom">Unsupported Media Type</h2>
        	<br>
            <span class="droid-bold">It seems that the Media Type you tried to play is not currently supported by Powder Player.</span>
        	<br><br>
			<button class="unsupported-animated-close pure-button pure-margin droid-bold" title="I understand">I understand</button><br><br>
        </center>
    </div>
    
    <div id="dropdown-1" class="dropdown dropdown-tip">
        <ul class="dropdown-menu">
            <li><a onClick="gui.Shell.openItem(powGlobals.torrent.engine.path+pathBreak+powGlobals.torrent.engine.torrent.name+pathBreak); return false" href="#">Open Folder</a></li>
            <li class="dropdown-divider"></li>
            <li><a onClick="powGlobals.torrent.engine.discover(); powGlobals.torrent.engine.swarm.reconnectAll(); return false" href="#">Force Download</a></li>
            <li><a id="menuPulsing" onClick="ui.settings.switchPulsing(); return false" href="#">Disable Pulsing</a></li>
            <li class="dropdown-divider"></li>
            <li><a onClick="gui.Clipboard.get().set('magnet:?xt=urn:btih:'+powGlobals.torrent.engine.infoHash.toUpperCase(),'text'); return false" href="#">Copy Magnet URI</a></li>
            <li class="dropdown-divider"></li>
            <li><a onClick="for (ij = 0; typeof powGlobals.lists.files[ij] !== 'undefined'; ij++) ui.buttons.play(ij); return false" href="#">Start All</a></li>
            <li><a onClick="for (ij = 0; typeof powGlobals.lists.files[ij] !== 'undefined'; ij++) ui.buttons.pause(ij); return false" href="#">Pause All</a></li>
            <li class="dropdown-divider"></li>
            <li><a onClick="$('#inner-in-content').animate({ scrollTop: 0 }, 'slow'); return false" href="#">Back to Video</a></li>
            <li><a onClick="ui.goto.mainMenu(); return false" href="#">Remove Torrent</a></li>
        </ul>
    </div>
    
    <input id="fileDialog" type="file" accept=".mkv,.avi,.mp4,.mpg,.mpeg,.mp3,.m4a,.flac,.m3u,video/*,audio/*" multiple />
    <input id="addPlaylistDialog" type="file" accept=".mkv,.avi,.mp4,.mpg,.mpeg,.mp3,.m4a,.flac,video/*,audio/*" multiple />
    <input id="subtitleDialog" type="file" accept=".sub,.srt,.vtt" />
    <input id="torrentDialog" type="file" accept=".torrent" multiple />
    <input id="folderDialog" type="file" nwdirectory />
    <input id="libraryDialog" type="file" nwdirectory />
    <input id="export_file" type="file" nwsaveas="snapshot.jpg" style="display:none" nwworkingdir=""/>
    
    <a id="tr-settings" class="easy-modal-open" href="#torrent-settings">Torrent Settings</a>
    <a id="open-file-settings" class="easy-modal-open" href="#file-settings">File Settings</a>
    <a id="open-unsupported" class="easy-modal-open" href="#unsupported">Unsupported Media Error</a>
    
          </div>
      </div>
    </div>
</div>
    
    <script src="lib/defaults.js"></script>
    <script src="lib/utils.js"></script>
    <script src="lib/window.js"></script>
    <script src="lib/dlna.js"></script>
    <script src="lib/library.js"></script>
    <script src="lib/subtitles.js"></script>
    <script src="lib/handlers/files.js"></script>
    <script src="lib/handlers/player.js"></script>
    <script src="lib/handlers/torrent.js"></script>
    <script src="lib/context_menu.js"></script>
    <script src="lib/ui.js"></script>
    <script src="lib/load.js"></script>
    <script src="lib/remote.js"></script>
    <script src="lib/init.js"></script>
</body>
</html>